/*
 * @Date: 2019-12-2
 * @Author: xuechengwu <xuechengwu@erayt.com>
 * @Description: 附件层
 */
import BaseLayer from './BaseLayer';
import Color from '../core/Color';
import Point from '../core/Point';
import Circle from '../base/Circle';
import Text from '../base/Text';
import Polygon from '../base/Polygon';
import Rectangle from '../base/Rectangle';
import HollowCircle from '../base/HollowCircle';
import Event from '../event/Event';
import OChart from '../core/OChart';


export default class AttachLayer extends BaseLayer {
  constructor(canvas, options) {
    super(canvas);
    this.data = options.data || []; // 满足条件的位置
    this.barLayer = options.barLayer || null;
    this.shape = options.shape || AttachLayer.SHAPE.TRIANGLE;
    this.topColor = new Color(options.topColor || '#00C000');
    this.bottomColor = new Color(options.bottomColor || '#EE1100');
    this.topText = options.topText || '空'; // 当shape 为TEXT时候
    this.bottomText = options.bottomText || '多'; // 当shape 为TEXT时候
    this.onClick = options.onClick || null;
  }

  make() {
    if (this.data.length === 0 || this.barLayer === null) {
      return;
    }
    this.childs.splice(0, this.childs.length);
    const { barWidth, min, max, yStep } = this.barLayer;
    for (let i = 0; i < this.data.length; i++) {
      const { index, type } = this.data[i];
      let attach = null;
      // calculate position of widget
      const px = index * barWidth; // x position of widget;
      let py = 0;
      const barData = this.barLayer.data[this.barLayer.barStart + index]; // bar data of current point
      if (type === AttachLayer.TYPE.TOP) {
        py = Math.round((barData.high - min) * yStep) + 5 + barWidth;
      } else {
        // the widget under the bar
        py = Math.round((barData.low - min) * yStep) - 5 -barWidth;
      }
      const ajarWidth = barWidth * 0.06;
      // instance widget
      if (this.shape === AttachLayer.SHAPE.CIRCLE) {
        attach = new Circle(this.canvas, barWidth * 0.44);
        attach.setPosition(px + barWidth / 2 + ajarWidth, py + this.barLayer.position.y);
      } else if (this.shape === AttachLayer.SHAPE.TRIANGLE) {
        const triangleWidth = barWidth * 0.88;
        if (type === AttachLayer.TYPE.TOP) {
          attach = new Polygon(this.canvas, {
            points: [
              new Point(ajarWidth, triangleWidth),
              new Point(ajarWidth + triangleWidth, triangleWidth),
              new Point(ajarWidth + 0.5 * triangleWidth, 0)
            ]
          });
        } else {
          attach = new Polygon(this.canvas, {
            points: [
             new Point(ajarWidth, 0),
             new Point(ajarWidth + triangleWidth, 0),
             new Point(ajarWidth + 0.5 * triangleWidth, triangleWidth)
            ]
          });
        }
        attach.setPosition(px, py + this.barLayer.position.y);
      } else if (this.shape === AttachLayer.SHAPE.RING) {
        attach = new HollowCircle(this.canvas, barWidth * 0.44);
        attach.setPosition(px + barWidth / 2 + ajarWidth, py + this.barLayer.position.y);
      } else if (this.shape === AttachLayer.SHAPE.SQUARE) {
        attach = new Rectangle(this.canvas, {
          width: barWidth * 0.88,
          height: barWidth * 0.88
        });
        attach.setPosition(px + ajarWidth, py + this.barLayer.position.y);
      } else if (this.shape === AttachLayer.SHAPE.TEXT) {
        if (type === AttachLayer.TYPE.TOP) {
          attach = new Text(this.canvas, {
            text: this.topText,
            font: 'Arial',
            size: barWidth,
            color: this.topColor
          });
        } else {
          attach = new Text(this.canvas, {
            text: this.bottomText,
            font: 'Arial',
            size: barWidth,
            color: this.bottomColor
          });
        }
        attach.setPosition(px + ajarWidth, py + this.barLayer.position.y);
      }
      if (type === AttachLayer.TYPE.TOP) {
        attach.setColor(this.topColor);
      } else {
        attach.setColor(this.bottomColor);
      }
      this.addChild(attach);
      if (this.onClick) {
        attach.addEventListener(
          OChart.version === OChart.VERSION.PC
          ? Event.EVENT_CLICK : Event.EVENT_TAP,
          (e) => {
            this.onClick(e, {
              bar: barData,
              data: this.data[i]
            });
          }
        )
      }
    }
  }
}
// widget type enum start
AttachLayer.TYPE = { TOP: 1, BOTTOM: 2 };
// widget type enum end

// widget shape type enum start
AttachLayer.SHAPE = {
  CIRCLE: 1,
  TRIANGLE: 2,
  RING: 3,
  SQUARE: 4,
  TEXT: 5,
};
// widget shape type enum end
